<template>
  <div>
    <van-nav-bar title="消费记录" left-arrow @click-left="onBack" />

    <div class="currency-cards">
      <div class="currency-card yellow">
        <div class="amount">{{this.allExpenses[0]}}</div>
        <div class="label">总消费额</div>
      </div>
      <div class="currency-card pink">
        <div class="amount">{{this.allExpenses[1]}}</div>
        <div class="label">总消费次数</div>
      </div>
    </div>

    <div v-for="item in rechargeList">
      <div class="task-item">
        <div class="task-icon">
          <img src="https://acai-reading.oss-cn-beijing.aliyuncs.com/%E9%87%91%E5%B8%81%E5%8A%A0.png" style="width: 40px;height: 40px;border-radius: 50%" v-if="item.typename==='1'">
          <img src="https://acai-reading.oss-cn-beijing.aliyuncs.com/%E9%87%91%E5%B8%81%E5%87%8F.png" style="width: 40px;height: 40px;border-radius: 50%" v-if="item.typename==='2'">
        </div>
        <div class="task-content">
          <div class="task-name">{{item.content}}</div>
          <div class="task-desc">{{item.paytime}}</div>
        </div>
        <div class="task-reward">
          <div class="reward-amount" v-if="item.typename==='1'">+{{item.amount}}</div>
          <div class="reward-two" v-if="item.typename==='2'">-{{item.amount}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data(){
    return{
      activeTab:"2",
      recharge:{},
      one:{},
      rechargeList:[],
      expenses:"",
      allExpenses:[],
    }
  },
  methods:{
    findAllExpenses(){
      axios.post("http://localhost:9999/api-user/recharge/findAllExpenses?id="+this.one.id).then(res=>{
        this.expenses = res.data;
        console.log(this.expenses)
        this.allExpenses = this.expenses.split(",");
      })
    },
    findAll(){
      console.log(this.activeTab)
      this.recharge.typename = this.activeTab;
      this.recharge.id = this.one.id;
      axios.post("http://localhost:9999/api-user/recharge/findAll",this.recharge).then(res=>{
        this.rechargeList = res.data;
      })
    },
    onBack(){
      this.$router.go(-1);
    }
  },
  created(){
    this.one = JSON.parse(localStorage.getItem("user"));

    this.findAll();

    this.findAllExpenses();
  }
}
</script>



<style scoped>

.currency-cards {
  display: flex;
  gap: 12px;
  margin: 16px;
}

.currency-card {
  flex: 1;
  padding: 16px;
  border-radius: 12px;
  text-align: center;
}

.currency-card.yellow {
  background-color: #fff5e6;
  border: 1px solid #ffd591;
}

.currency-card.pink {
  background-color: #fff0f6;
  border: 1px solid #ffadd2;
}

.amount {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.coin-total {
  color: #666;
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
}

.action-btn {
  width: 80%;
  border-radius: 16px;
}
.header {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 40px;
}
.my-tabs{
  flex: 1;
}
.task-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
  margin: 0 15px;
}

.task-content {
  flex: 1;
  margin: 0 12px;
}

.task-name {
  font-weight: bold;
  margin-bottom: 4px;
}

.task-desc {
  color: #999;
  font-size: 12px;
}

.task-reward {
  text-align: right;
}

.reward-amount {
  color: #ff6034;
  font-weight: bold;
  margin-bottom: 4px;
}
.reward-two {
  color: gray;
  font-weight: bold;
  margin-bottom: 4px;
}
</style>
